<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toJohn</title>
    <link rel="stylesheet" href="./css/Index.css">
	<link rel="shortcut icon" href="images/favicon.png"/>
    <script>
        //LISTEN ENTER KEYDOWN EVENT
        document.onkeydown = function(e){
            if(!e){
                e = window.event;
            }
            if((e.keyCode || e.which) == 13){
                do_search();
            }
        }

        //DO SEARCH EVENT
        function do_baidu_search() {
            var search_txt = document.getElementById("search-bar-input").value;
            if (search_txt == "") {
                alert("search text is empty ! ");
                return false;
            }
            var search_url = "https://www.baidu.com/s?wd=" + search_txt;
            window.open(search_url);
        }
        function do_google_search() {
            var search_txt = document.getElementById("search-bar-input").value;
            if (search_txt == "") {
                alert("search text is empty ! ");
                return false;
            }
            var search_url = "https://www.google.com/search?newwindow=1&hl=zh-CN&q=" + search_txt;
            window.open(search_url);
        }
		function on_enter_key(){
			if (event.keyCode==13){
				var search_txt = document.getElementById("search-bar-input").value;
				if (search_txt == "") {
					alert("search text is empty ! ");
					return false;
				}
				var search_url = "https://www.baidu.com/s?wd=" + search_txt;
				window.open(search_url);
			}
		}
    </script>
</head>
<body>

<!---------------------------------------------------------------------------------------------------->

<div id="logo">
    <img src="./images/Logo.png" alt="tojohnonly">
</div>

<!---------------------------------------------------------------------------------------------------->
<div id="search-bar">
    <input id="search-bar-input"  onkeydown="on_enter_key()" type="text" placeholder="search everything ..." autocomplete="off">
	<button style="margin-left: 185px;" onclick="do_baidu_search()">Google</button><a class="close"></a>
	<button onclick="do_google_search()">手气不错</button><a class="close"></a>
</div>

<!---------------------------------------------------------------------------------------------------->
<div id="nav-panel">

    <a class="nav-panel-item" title="Google" href="https://www.google.com/" target="_blank">
    <img src="./images/web_icons/Google.png" alt="Google" height="16" width="16" class="nav-panel-item-img">
    <div class="nav-panel-item-txt">Google</div>
    </a>

    <a class="nav-panel-item" title="Wikipedia" href="https://zh.wikipedia.org/" target="_blank">
        <img src="./images/web_icons/Wikipedia.png" alt="Wikipedia" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Wikipedia</div>
    </a>

    <a class="nav-panel-item" title="Dictionary" href="http://dict.youdao.com/" target="_blank">
        <img src="./images/web_icons/Dictionary.png" alt="Dictionary" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Dictionary</div>
    </a>

    <a class="nav-panel-item" title="Blog" href="https://tojohnonly.github.io/" target="_blank">
        <img src="./images/web_icons/Blog.png" alt="Blog" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Blog</div>
    </a>

    <a class="nav-panel-item" title="Baidu" href="https://www.baidu.com/" target="_blank">
        <img src="./images/web_icons/Baidu.png" alt="Baidu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Baidu</div>
    </a>

    <!----------------------------------------------2------------------------------------------------------>
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="InfoQ" href="http://www.infoq.com/cn/" target="_blank">
        <img src="./images/web_icons/InfoQ.png" alt="InfoQ" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">InfoQ</div>
    </a>

    <a class="nav-panel-item" title="CBlog" href="http://blog.csdn.net/tojohnonly" target="_blank">
        <img src="./images/web_icons/CBlog.png" alt="CBlog" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">CBlog</div>
    </a>

    <a class="nav-panel-item" title="Toutiao" href="http://toutiao.io/" target="_blank">
        <img src="./images/web_icons/Toutiao.png" alt="Toutiao" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Toutiao</div>
    </a>

    <a class="nav-panel-item" title="Hackers" href="https://news.ycombinator.com/" target="_blank">
        <img src="./images/web_icons/Hackers.png" alt="Hackers" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Hackers</div>
    </a>

    <a class="nav-panel-item" title="Stack" href="http://stackoverflow.com/" target="_blank">
        <img src="./images/web_icons/Stack.png" alt="Stack" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Stack</div>
    </a>

    <!----------------------------------------------3------------------------------------------------------>
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Tmtpost" href="http://www.tmtpost.com/" target="_blank">
        <img src="./images/web_icons/Tmtpost.png" alt="Tmtpost" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Tmtpost</div>
    </a>
	
    <a class="nav-panel-item" title="Cnbeta" href="https://www.cnbeta.com/" target="_blank">
        <img src="./images/web_icons/Cnbeta.png" alt="Cnbeta" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Cnbeta</div>
    </a>

    <a class="nav-panel-item" title="Leiphone" href="http://www.leiphone.com/" target="_blank">
        <img src="./images/web_icons/Leiphone.png" alt="Leiphone" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Leiphone</div>
    </a>

    <a class="nav-panel-item" title="Huxiu" href="http://www.huxiu.com/" target="_blank">
        <img src="./images/web_icons/Huxiu.png" alt="Huxiu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Huxiu</div>
    </a>

    <a class="nav-panel-item" title="iFanr" href="http://www.ifanr.com/" target="_blank">
        <img src="./images/web_icons/iFanr.png" alt="iFanr" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">iFanr</div>
    </a>
	
	<!-----------------------------------------------4----------------------------------------------------->
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Github" href="https://github.com/" target="_blank">
        <img src="./images/web_icons/Github.png" alt="Github" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Github</div>
    </a>

    <a class="nav-panel-item" title="V2EX" href="https://www.v2ex.com/" target="_blank">
        <img src="./images/web_icons/V2EX.png" alt="V2EX" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">V2EX</div>
    </a>

    <a class="nav-panel-item" title="Geekpark" href="http://www.geekpark.net/" target="_blank">
        <img src="./images/web_icons/Geekpark.png" alt="Geekpark" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Geekpark</div>
    </a>
	
    <a class="nav-panel-item" title="Engadget" href="https://cn.engadget.com/" target="_blank">
        <img src="./images/web_icons/Engadget.png" alt="Engadget" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Engadget</div>
    </a>
	
    <a class="nav-panel-item" title="IThome" href="http://www.ithome.com/" target="_blank">
        <img src="./images/web_icons/IThome.png" alt="IThome" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">IThome</div>
    </a>
	
    <!----------------------------------------------5------------------------------------------------------>
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Map" href="http://map.baidu.com/" target="_blank">
        <img src="./images/web_icons/Map.png" alt="Map" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Map</div>
    </a>

    <a class="nav-panel-item" title="Drive" href="https://drive.google.com/drive/my-drive" target="_blank">
        <img src="./images/web_icons/Drive.png" alt="Drive" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Drive</div>
    </a>

    <a class="nav-panel-item" title="Outlook" href="https://outlook.live.com/" target="_blank">
        <img src="./images/web_icons/Outlook.png" alt="Outlook" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Outlook</div>
    </a>

    <a class="nav-panel-item" title="163" href="http://mail.163.com/" target="_blank">
        <img src="./images/web_icons/163.png" alt="163" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">163</div>
    </a>

    <a class="nav-panel-item" title="BaiDisk" href="http://pan.baidu.com/disk/home" target="_blank">
        <img src="./images/web_icons/BaiDisk.png" alt="BaiDisk" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">BaiDisk</div>
    </a>

    <!--------------------------------------------6-------------------------------------------------------->
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Youtube" href="https://www.youtube.com/" target="_blank">
        <img src="./images/web_icons/Youtube.png" alt="Youtube" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Youtube</div>
    </a>

    <a class="nav-panel-item" title="Twitch" href="https://www.twitch.tv/" target="_blank">
        <img src="./images/web_icons/Twitch.png" alt="Twitch" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Twitch</div>
    </a>

    <a class="nav-panel-item" title="Bilibili" href="http://www.bilibili.com/" target="_blank">
        <img src="./images/web_icons/Bilibili.png" alt="Bilibili" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Bilibili</div>
    </a>

    <a class="nav-panel-item" title="Vimeo" href="https://vimeo.com/" target="_blank">
        <img src="./images/web_icons/Vimeo.png" alt="Vimeo" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Vimeo</div>
    </a>

    <a class="nav-panel-item" title="Douyu" href="https://www.douyu.com/" target="_blank">
        <img src="./images/web_icons/Douyu.png" alt="Douyu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Douyu</div>
    </a>

    <!---------------------------------------------7------------------------------------------------------->
    <div class="nav-panel-line"></div>
	
    <a class="nav-panel-item" title="SRs" href="http://www.nfcmag.com/" target="_blank">
        <img src="./images/web_icons/SRs.png" alt="SRs" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">SRs</div>
    </a>

    <a class="nav-panel-item" title="BBC" href="http://www.bbc.com/zhongwen/simp" target="_blank">
        <img src="./images/web_icons/BBC.png" alt="BBC" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">BBC</div>
    </a>

    <a class="nav-panel-item" title="WashPost" href="https://www.washingtonpost.com/" target="_blank">
        <img src="./images/web_icons/WashPost.png" alt="WashPost" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">WashPost</div>
    </a>

    <a class="nav-panel-item" title="VOA" href="http://www.voachinese.com/" target="_blank">
        <img src="./images/web_icons/VOA.png" alt="VOA" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">VOA</div>
    </a>

    <a class="nav-panel-item" title="People" href="http://www.people.com.cn/" target="_blank">
        <img src="./images/web_icons/People.png" alt="People" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">People</div>
    </a>
	
    <!----------------------------------------------8------------------------------------------------------>
    <div class="nav-panel-line"></div>
    <a class="nav-panel-item" title="Zhihu" href="http://www.zhihu.com/" target="_blank">
        <img src="./images/web_icons/Zhihu.png" alt="Zhihu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Zhihu</div>
    </a>

    <a class="nav-panel-item" title="Hupu" href="https://soccer.hupu.com/" target="_blank">
        <img src="./images/web_icons/Hupu.png" alt="Hupu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Hupu</div>
    </a>

    <a class="nav-panel-item" title="Facebook" href="https://www.facebook.com/" target="_blank">
        <img src="./images/web_icons/Facebook.png" alt="Facebook" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Facebook</div>
    </a>

    <a class="nav-panel-item" title="Twitter" href="https://twitter.com/" target="_blank">
        <img src="./images/web_icons/Twitter.png" alt="Twitter" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Twitter</div>
    </a>

    <a class="nav-panel-item" title="Douban" href="https://www.douban.com/" target="_blank">
        <img src="./images/web_icons/Douban.png" alt="Douban" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Douban</div>
    </a>
	
    <!----------------------------------------------9------------------------------------------------------>
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Sports" href="http://sports.qq.com/" target="_blank">
        <img src="./images/web_icons/Sports.png" alt="Sports" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Sports</div>
    </a>

    <a class="nav-panel-item" title="Apple" href="https://www.apple.com/cn/" target="_blank">
        <img src="./images/web_icons/Apple.png" alt="Apple" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Apple</div>
    </a>
	
    <a class="nav-panel-item" title="Weibo" href="http://weibo.com/tojohnonly/home" target="_blank">
        <img src="./images/web_icons/Weibo.png" alt="Weibo" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Weibo</div>
    </a>

    <a class="nav-panel-item" title="ZhiBo8" href="https://www.zhibo8.cc/" target="_blank">
        <img src="./images/web_icons/ZhiBo8.png" alt="ZhiBo8" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">ZhiBo8</div>
    </a>

    <a class="nav-panel-item" title="LeQiu" href="https://leqiuba.com/" target="_blank">
        <img src="./images/web_icons/LeQiu.png" alt="LeQiu" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">LeQiu</div>
    </a>

    <!-------------------------------------------------10--------------------------------------------------->
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="JD" href="http://www.jd.com/" target="_blank">
        <img src="./images/web_icons/JD.png" alt="JD" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">JD</div>
    </a>

    <a class="nav-panel-item" title="Starbucks" href="https://www.starbucks.com.cn/" target="_blank">
        <img src="./images/web_icons/Starbucks.png" alt="Starbucks" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Starbucks</div>
    </a>

    <a class="nav-panel-item" title="Amazon" href="https://www.amazon.cn/" target="_blank">
        <img src="./images/web_icons/Amazon.png" alt="Amazon" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Amazon</div>
    </a>

    <a class="nav-panel-item" title="Taobao" href="https://www.taobao.com/" target="_blank">
        <img src="./images/web_icons/Taobao.png" alt="Taobao" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Taobao</div>
    </a>
	
    <a class="nav-panel-item" title="MeiTuan" href="https://www.meituan.com" target="_blank">
        <img src="./images/web_icons/MeiTuan.png" alt="MeiTuan" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">MeiTuan</div>
    </a>
	
    <!--------------------------------------------------11-------------------------------------------------->
    <div class="nav-panel-line"></div>

    <a class="nav-panel-item" title="Bandcamp" href="https://bandcamp.com/" target="_blank">
        <img src="./images/web_icons/Bandcamp.png" alt="Bandcamp" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Bandcamp</div>
    </a>
	
    <a class="nav-panel-item" title="Instagram" href="https://www.instagram.com/" target="_blank">
        <img src="./images/web_icons/Instagram.png" alt="Instagram" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Instagram</div>
    </a>

    <a class="nav-panel-item" title="NoseTime" href="https://www.nosetime.com/" target="_blank">
        <img src="./images/web_icons/NoseTime.png" alt="NoseTime" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">NoseTime</div>
    </a>
	
    <a class="nav-panel-item" title="Steam" href="https://store.steampowered.com/" target="_blank">
        <img src="./images/web_icons/Steam.png" alt="Steam" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Steam</div>
    </a>

    <a class="nav-panel-item" title="Gamer" href="http://www.gamersky.com/" target="_blank">
        <img src="./images/web_icons/Gamer.png" alt="Gamer" height="16" width="16" class="nav-panel-item-img">
        <div class="nav-panel-item-txt">Gamer</div>
    </a>

</div>

</body>
</html>